<template>
	<view class="content">

		<view class="tabbar-content">
			<view class="tab" :class="navId == item.id?'active':''" v-for="(item,index) in navList" :key="index"
				@tap="changeNav(item)">
				{{item.title}}
				<view class="procss" v-if="navId == item.id"></view>
			</view>
		</view>

		<!-- 预约列表 -->
		
		<view class="list" v-for="(item,index) in list" :key="index">
			<view class="info">
				<image :src="item.imageUrl" class='imageUrlSize' mode=""></image>
				<view class="right">
					<view class="title">
						<view class="text elliptical1">
							{{item.goodsName}}
						</view>
						<view class="sessionName">
							{{item.goodsSessionsName}}
						</view>
					</view>
					<view class="time">
						预约时间：{{item.createTime}}
					</view>
					<view class="time" style='margin-top: 0rpx;margin-bottom: 16rpx;' v-if='item.price'>
						抢购总价格：{{item.price}}
					</view>
					
					<view class="options">
						<view class="num">
							预约数量：x{{item.quantity}}
						</view>
						
					<!-- 	<view class="cancelBtn" @tap="cancel(item)" v-if="item.state == 0">
							取消
						</view> -->
						<image src="@/static/index/appointmentSuccess.png" class="img" v-if="item.state == 1"></image>
						<image src="@/static/index/appointmentCancel.png" class="img" v-if="item.state == 3"></image>
						<image src="@/static/index/appointmentLose.png" class="img" v-if="item.state == 2"></image>
					</view>
				</view>
				<!-- <view class="tiles">{{item.goodsName}}</view>
				<view class="time"><span>数量：</span>{{item.createTime}}</view>
				<view class="time"><span>预约时间：</span>{{item.createTime}}</view>
				<view class="time"><span>支付多多券：</span>{{item.createTime}}</view> -->
				<!-- 状态0已预约1已成功2已失败3已取消 -->
				<!-- <view class="cancel" @tap="cancel(item)" v-if="item.state == 0">取消</view> -->
				


			</view>
		</view>
		<view class="noneContent" v-if="list.length == 0">
			<image src="@/static/withdraw/noneCard.png" class="noneImg"></image>
			<view class="tips">暂无数据</view>
		</view>
	</view>
</template>

<script>
	import {
		cancelAppointment0214,
		getMyAppointment0214
	} from '../../api/api.js'
	export default {
		data() {
			return {
				tabberId: 1,
				list: [],
				pageNum: 1,
				pageSize: 20,
				pages: '',
				total: '',
				navId: 1,
				navList: [
					// {
					// 	id: 0,
					// 	title: '已预约'
					// },
					{
						id: 1,
						title: '已成功'
					},
					{
						id: 2,
						title: '已失败'
					},
					{
						id: 3,
						title: '已取消'
					}
				],
			}
		},
		onShow() {
			this.pageNum = 1
			this.list = []
			// 获取预约记录
			this.handleGetMyAppointment0214()
		},
		onReachBottom() {
			if (this.pages <= this.pageNum) {
				uni.showToast({
					icon: 'none',
					title: '暂无更多~'
				})
				return
			} else {
				this.pageNum++
				// 获取预约记录
				this.handleGetMyAppointment0214()
			}
		},
		methods: {
			handleGetMyAppointment0214() {
				getMyAppointment0214({
					pageNum:  this.pageNum,
					pageSize: this.pageSize,
					state: this.navId //0已预约1已成功2已失败
				}).then(res => {
				
					this.list = this.list.concat(res.data.records)
					this.pages = res.data.pages
					this.total = res.data.total
				})
			},
			changeNav(item) {
				this.navId = item.id
				this.pageNum = 1
				this.list = []
				// 获取预约记录
				this.handleGetMyAppointment0214()
			},
			// 获取预约记录
			// getList() {
			// 	let data = {
			// 		pageNum: this.pageNum,
			// 		pageSize: this.pageSize,
			// 		state: this.navId
			// 	}
			// 	myAppointment(data).then(res => {

			// 	})
			// },
			// 取消预约
			cancel(item) {
				var that = this
				let data = {
					id: item.id
				}
				cancelAppointment0214(data).then(res => {
					// console.log(res)
					if (res.code == 200) {
						uni.showToast({
							title: '取消预约成功',
							icon: 'none'
						})
						setTimeout(function() {
							that.pageNum = 1
							that.list = [] // 获取预约记录
							that.handleGetMyAppointment0214()
						}, 500)
					}
				})
			}
		}
	}
</script>

<style>
	page {
		background: #F6F6F8;
	}
</style>
<style lang="less" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;

		.tabbar-content {
			margin-bottom: 20rpx;
			width: 750rpx;
			background: #fff;
			height: 96rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.tab {
				position: relative;
				width: 25%;
				font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
				font-weight: 400;
				font-size: 34rpx;
				color: #BCBDBD;
				text-align: center;
				line-height: 96rpx;

				.procss {
					position: absolute;
					bottom: 30rpx;
					right: 46rpx;
					width: 98rpx;
					height: 8rpx;
					background: #2DD800;
				}
			}

			.active {
				font-weight: bold;
				color: #3C3C3C;
			}
		}

		.topContent {
			margin-top: -2rpx;
			background-color: #FE3B33;
			padding: 33rpx 0;
			font-size: 30rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 42rpx;

			.title {
				margin-left: 30rpx;
			}
		}

		// 预约列表
		.list {
			display: flex;
			flex-direction: column;
			.info{
				width: 710rpx;
				height: 200rpx;
				background: #FFFFFF;
				border-radius: 8rpx;
				border-radius: 10rpx;
				padding:20rpx;
				box-sizing: border-box;
				margin-bottom: 20rpx;
				display: flex;
				position: relative;
				
				.imageUrlSize {
					width: 160rpx;
					height: 160rpx;
					border-radius: 8rpx;
					margin-right: 20rpx;
				}
				.right{
					flex: 1;
					display: flex;
					flex-direction: column;
					.title{
						display: flex;
						justify-content: space-between;
						align-items: center;
						.text{
							width: 400rpx;
							font-weight: 800;
							font-size: 28rpx;
							color: #3C3C3C;
						}
						.sessionName{
							font-weight: 400;
							font-size: 24rpx;
							color: #EB3B27;
						}
					}
				}
				.time{
					font-weight: 500;
					font-size: 24rpx;
					color: #898989;
					margin-top: 16rpx;
					margin-bottom: 32rpx;
				}
				.options{
					display: flex;
					align-items: flex-end;
					justify-content: space-between;
					.num{
						font-weight: 500;
						font-size: 24rpx;
						color: #898989;
					}
					.cancelBtn{
						width: 124rpx;
						height: 48rpx;
						background: #F1F1F1;
						border-radius: 40rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-weight: 500;
						font-size: 28rpx;
						color: #717375;
					}
				}
				
				
			}

			

			// background: #fff;
			// position: relative;
			// margin-bottom: 20rpx;
			// padding: 30rpx;
			// border-bottom: 1rpx solid #EEEEEE;
			// width: 690rpx;
			// display: flex;
			// .info {
			// 	position: relative;

			// 	.tiles {
			// 		font-family: PingFang SC, PingFang SC;
			// 		font-weight: bold;
			// 		font-size: 32rpx;
			// 		color: #3C3C3C;
			// 		line-height: 32rpx;
			// 		margin-bottom: 40rpx;
			// 	}

			// 	.time {
			// 		margin-bottom: 20rpx;
			// 		font-family: PingFang SC, PingFang SC;
			// 		font-weight: 500;
			// 		font-size: 28rpx;
			// 		color: #3C3C3C;
			// 		line-height: 32rpx;

			// 		span {
			// 			width: 128rpx;
			// 			height: 32rpx;
			// 			font-family: PingFang SC, PingFang SC;
			// 			font-weight: 400;
			// 			font-size: 24rpx;
			// 			color: #909090;
			// 			line-height: 32rpx;
			// 		}
			// 	}

			// 	.cancel {
			// 		position: absolute;
			// 		width: 124rpx;
			// 		height: 48rpx;
			// 		background: #F1F1F1;
			// 		border-radius: 40rpx;
			// 		text-align: center;
			// 		line-height: 48rpx;
			// 		font-family: PingFang SC, PingFang SC;
			// 		font-weight: 500;
			// 		font-size: 28rpx;
			// 		color: #717375;
			// 		line-height: 48rpx;
			// 		right: 28rpx;
			// 		bottom: 0rpx;
			// 	}

				.img {
					position: absolute;
					width: 120rpx;
					height: 120rpx;
					bottom: 0rpx;
					right: 0rpx;
				}
		}
	}

	.noneContent {
		display: flex;
		align-items: center;
		flex-direction: column;

		.noneImg {
			margin-top: 132rpx;
			width: 320rpx;
			height: 291rpx;
		}

		.tips {
			margin-top: 36rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #B8B8B8;
			line-height: 33rpx;
		}

	}
</style>